<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基本指令使用</title>
    <script src="../js/vue.js"></script>
</head>
<body>


<!--
        1.{{info}}                    无法识别html标签     不会替换标签中原有的值
        2. v-text="info"              innerText        会替换原有标签中的值
        3. v-html="info"              innerHTML        会替换原有标签中的值

-->

<div id="app">


</div>

<script>
    const vm = new Vue({
        template: `
            <div>
                <h1>info:{{info}}</h1>
                <h1 v-text="info">info:</h1>
                <h1 v-html="info">info:</h1>
            </div>
        `,
        data: {
            info:'<i>hello vue</i>'
        }
    })
    vm.$mount("#app");
</script>
</body>
</html>
